<template>
  <div class="app-container" ref="appcontainer">
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row> -->
    <el-table v-loading="loading" :height="tableHeight" :data="list">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="员工昵称" align="center" prop="userName" />
      <el-table-column label="联系方式" align="center" prop="phone" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleLook(scope.row.id)"
            >查看</el-button
          >
          <!-- <el-button size="mini" type="text" @click="handleEdit(scope.row)"
            >修改</el-button
          >

          <el-button size="mini" type="text" @click="handleDelete(scope.row.id)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="title"
      :visible.sync="handDialogVisible"
      width="80%"
      height="800px"
      @close="handleClose"
      class="detaildialog"
    >
    <el-table v-loading="loading" height="600px" :data="detail">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="价格" align="center" prop="money" />
      <el-table-column label="时间" align="center" prop="createTime" />
    </el-table>
    <pagination
      :total="detailTotal"
      :page.sync="detailQueryParams.pageNum"
      :limit.sync="detailQueryParams.pageSize"
      @pagination="getDetail"
    />
    </el-dialog>
  </div>
</template>
  <script>
import { getList,getDeatil } from "@/api/staff/index";
export default {
  data() {
    return {
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: true,
      tableHeight:0,
      handDialogVisible: false,
      detail: [],
      detailTotal: 0,
      detailQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      title: '员工分销明细',
      currentLookId: null
    };
  },
  methods: {
    calHeight () {
          this.$nextTick(() => {
              const rect = this.$refs.appcontainer.getBoundingClientRect();
              this.tableHeight = rect.height-120;
          })
      },
    getList() {
      this.loading = true;
      getList(this.queryParams)
        .then((res) => {
          this.list = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleLook(id) {
        this.currentLookId = id
        this.getDetail()
    },
    getDetail() {
        getDeatil(this.currentLookId,this.detailQueryParams).then(res => {
            this.handDialogVisible = true
            this.detail = res.data.rows
        })
    },
    handleClose() {
      this.detailQueryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.detail = []
    },
  },
  mounted() {
    this.calHeight()
    this.getList();
  },
};
</script>
<style>
.detaildialog .el-dialog {
    height: 800px;
}
.detaildialog .el-dialog__body {
    height: 740px;
    max-height:74vh;
}
</style>